详解｜做组件，Figma 有哪些功能和技巧？

  关注「长弓小子」看更多设计干货！

Hi，我是元尧。长按下图二维码加我微信，带你进设计师交流群，与上万小伙伴一起交流成长！

「👇 添加好友请备注：设计交流」

   全文共 1927 字，阅读需要 8 分钟

我在之前的文章中介绍过很多关于组件设计和应用的经验，大多集中在 “道”、“法”、“术” 三个层面。今天来聊聊 Figma 这款工具，从 “器” 的层面看，制作组件有哪些实用的技巧。

与组件相关的工作，整体可以分为两个部分： 

一是组件的设计，即「做」组件；

二是组件的使用，即「用」组件。

组件要想好用，这两个方面要兼顾。因此我会从这两部分来聊 Figma 的功能。你也可以从这些功能中学习到 Figma 作为一款优秀的设计协同软件，对于用户体验的思考与打磨。

PART 1

「做」组件

在组件设计过程中，一是 “高效性” ，二是 “轻量级“，对于组件设计师尤为重要。Figma 从这两点出发，用以下功能为你减压提效：

   批量选择相同元素

我们知道一个组件会有不同的状态，而这些状态实际上就是组件的 “变体” 。如果组件中的某个元素做了更新，通常设计师要对组件的每一个变体都做调整。Figma 通过识别元素的属性，可以一键全选该组件的所有变体中的同一元素（Select all matching layers）：

举个例子，下图中我想要删掉组件中的图片，只需要通过点击上图的小按钮，就可以一键全选图片来做一次性删除：

一键选中同类元素，便于操作

   布尔（Boolean）功能

一个完整的组件中包含着很多个属性的“变体”，全部罗列出来会导致组件的文件繁重，不易于存档和细节调整。

下图中，左边是我们做一个组件的近 200 种不同变体样式，右边为该组件实际使用的效果：

左边框中为该组件的变体样式

而现在，只需要给该组件添加布尔（Boolean）属性，相当于通过对元素的图层进行 “隐藏” 和 “显现”，就可以直接调节这些变体的属性了：

下图中，左边是我们组件使用布尔功能后的变体数量，组件可以达到和之前同样的使用效果，省时、省力、省空间：

左边框中为该组件使用布尔功能后的变体样式

   单描边功能

我们曾经会将分割线单独做成组件使用。现在 Figma 推出了单描边的功能，可以直接用组件的描边替代分割线，减少做组件时对分割线的用错、漏用等问题：

   Design Token 

我曾经在 Design Token 在设计系统中的意义与应用 一文中介绍过 Token 的价值和意义。我们已经沉淀了很多的组件，每一个组件的背后其实都对应了一连串的 Design Token。我们以下面三款组建的色彩属性为例：

你可以看到在上图中的三个组件中都用了一个蓝色       ，对应着（WF）/support/information 这个 Token，它的作用就是用作“信息提示”的功能色。在今年的 8 月，我们做了产品视觉升级，更改了这个蓝色功能色的色值，由 #43BBFF  更改为 #0089D6：

通过更改 Token 所对应的色值，我们不需要一个个修改组件就可以直接将使用这个颜色的组件，一次性全部更新升级，节省了大量的时间和操作成本：

更改 Token 列表中的颜色色值

公众号后台回复 Token，看更多经验和实用教程！

PART 2

「用」组件

使用组件的过程中，一是 “简单直接” ，二是  “灵活多变” ，对于业务设计师来说尤为重要。Figma 从这两点出发，从如下功能提升组件的易用性：

   嵌套变体功能

组件大多都是层层嵌套的。以前在使用组件时，需要特别选中组件中要改状态的元素。现在 Figma 提供了嵌套变体的功能，在选中组件之后可以直接看到其中嵌套元素的变体状态，做相应的调整和修改：

侧边栏中组件的状态可以直接做更改

嵌套变体的功能目前还处于 Beta 版本，想尝试使用该功能，你可在个人账户的 Settings 中找到 Components properties，将开关打开：

   文字超出范围显示省略号

在使用组件时经常会遇到文字超出最优范围的情况。之前我们会在组件的规则中、甚至是在组件本身上注明：“这里的文字如果超过三行，最后一个字请使用 ‘…’ ” 以此来提醒设计师注意排版。现在 Figma 推出了文字最末一个字使用 “…” 的功能，对设计师来说是很友好的提示方式：

😊更多详细的使用内容我会在日后为大家做介绍。其他与组件相关的内容，你可以看这里：

---

如果你还有关于组件设计的问题，以及其他设计、工作、作品集、面试相关的问题，欢迎识别下图二维码，直达提问区，有问必答：

如果你想加入设计师交流群，也可以识别二维码👇👇👇添加我的微信。添加好友请备注：设计交流。

另外，我在知识星球每日输出的知识内容中，选择了一部分进行汇总，梳理了从【接到设计需求到产出设计沉淀】的完整流程，可以在公众号后台留言 “设计思维”  👇👇👇 带你升级认知！

想看与“工作经验”相关的精华内容，可以在公众号后台留言 “工作经验”  👇👇👇

学海无涯，盼你同舟！😊

- END -

欢迎长按图片👇👇👇加我微信

带你加入设计师社群

了解更多设计理念和设计方法

期待与你的交集！

「添加好友请备注：设计交流」